<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="css/eui.css">
  <style>
    body {
      font: 18px "Microsoft YaHei UI";
      margin: 0;
      padding: 0;
      /*vertical-align: center;*/
    }

    header, main, footer {
      margin: 0 !important;
      padding: 0 !important;
    }

    a {
      text-decoration: none;
      color: #333333;
    }

    #header_div1 .el-menu--horizontal > .el-menu-item, #header_div1 .el-menu--horizontal > .el-submenu .el-submenu__title {
      height: 36px;
      line-height: 36px;
    }

    #header_div1 .el-menu-item, #header_div1 .el-submenu__title {
      font-size: 12px;
    }

    .header_span_a {
      margin-right: 20px;
      margin-left: 20px;
      color: white;
      font-size: 12px;
    }

    .el-menu--horizontal > .el-menu-item.is-active {
      border-bottom: white;
    }

    #header_div2 .el-menu--horizontal > .el-menu-item {
      height: 80px;
      line-height: 80px;
    }

    #header_div2 .el-menu-item, #header_div2 .el-submenu__title {
      font-size: 18px;
      padding: 0 40px 0 0;
    }
    .el-button--primary{
      background-color: #392f41;
      border: #392f41;
    }
    .el-button--primary:hover{
      background-color: rgba(57,47,65,0.8);
    }
    #login_div1{
      background-image: url('imgs/ab.jpg');
      background-size: 80px 80px;
      background-repeat: no-repeat;
      height: 120px;
      background-position: 42%;
    }
    header h1{
      height: 100px;
      line-height: 100px;
      background-image: url("imgs/ab.jpg");
      background-repeat: no-repeat;
      background-size: 80px 80px;
      background-position: 8% 50%;
      padding-left: 230px;
    }
    .el-tabs--left .el-tabs__item.is-left, .el-tabs--left .el-tabs__item.is-right, .el-tabs--right .el-tabs__item.is-left, .el-tabs--right .el-tabs__item.is-right{
      width: 200px;
      height: 80px;
      font-size: 20px;
      line-height: 80px;
      padding-right: 100px;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header style="height: 190px">
      <!-- 黑条开始 -->
      <div style="height: 36px; line-height: 36px;background-color: #392f41">
                    <span style="margin-left: 105px">
                        <a class="header_span_a" href="/">首页</a><el-divider direction="vertical"></el-divider>
                        <a class="header_span_a" href="">猎者商城</a><el-divider direction="vertical"></el-divider>
                        <a class="header_span_a" href="">猎者俱乐部</a>
                    </span>
        <div id="header_div1" style="float: right; margin-right: 120px">
          <el-menu
                  class="el-menu-demo"
                  mode="horizontal"
                  background-color="#392f41"
                  text-color="#fff"
                  @select="handleSelect"
                  active-text-color="#ffd04b">
            <el-menu-item index="login">请登录</el-menu-item>

            <el-menu-item index="reg">注册</el-menu-item>
            <el-menu-item index="myorder">我的订单</el-menu-item>
            <el-menu-item index="shoppingcart">购物车</el-menu-item>
            <el-submenu index="5">
              <template slot="title">客服</template>
              <el-menu-item index="5-1" style="text-align: center">在线客服</el-menu-item>
              <el-menu-item index="5-2">
                <i class="el-icon-phone" style="color: white"></i>电话客服 : 400-000-0000
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </div>
      <!-- 黑条结束 -->
      <h1>
        欢迎来到猎者商城
      </h1>
    </el-header>
    <el-container>
      <el-main>
      <el-tabs :value="name" :tab-position="tabPosition" style="height: auto">
          <el-tab-pane name="1" label="我的订单">
            <el-table :data="orderArr" height="250" style="width: 100%">
            <el-table-column type="index" label="编号" width="50"></el-table-column>
            <el-table-column prop="url" label="商品图片" width="180">
              <!-- template模板 scope里面装着遍历的对象 -->
              <template slot-scope="scope">
                <!-- scope.row 得到当前遍历的对象 -->
                <img :src="scope.row.url" style="width: 100px" alt="">
              </template>
            </el-table-column>
            <el-table-column prop="title" label="商品名称" width="180"></el-table-column>
            <el-table-column prop="price" label="价格" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column prop="gmtCreate" label="订单创建时间" width="180"></el-table-column>
            <el-table-column label="操作">
              <!-- scope对象中会装着当前遍历的信息 -->
              <template slot-scope="scope">
                <!--
                    scope.$index代表遍历对象在数组中的下标
                    scope.row代表当前便利的分类对象
                 -->
                <el-popconfirm title="确定删除此订单吗？"
                               @confirm="categoryDelete(scope.$index, scope.row)">
                  <el-button size="mini" type="danger" slot="reference">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          </el-tab-pane>
          <el-tab-pane name="2" label="我的购物车">
            <el-table :data="cartArr" height="250" style="width: 100%">
              <el-table-column type="index" label="编号" width="50"></el-table-column>
              <el-table-column prop="url" label="商品图片" width="180">
                <!-- template模板 scope里面装着遍历的对象 -->
                <template slot-scope="scope">
                  <!-- scope.row 得到当前遍历的对象 -->
                  <img :src="scope.row.url" style="width: 100px" alt="">
                </template>
              </el-table-column>
              <el-table-column prop="title" label="商品名称" width="180"></el-table-column>
              <el-table-column prop="price" label="单价" width="180"></el-table-column>
              <el-table-column prop="price" label="数量" width="180"></el-table-column>
              <el-table-column prop="price" label="总价" width="180"></el-table-column>
              <el-table-column label="操作">
                <!-- scope对象中会装着当前遍历的信息 -->
                <template slot-scope="scope">
                  <!--
                      scope.$index代表遍历对象在数组中的下标
                      scope.row代表当前便利的分类对象
                   -->
                  <el-popconfirm title="确定删除此商品吗？"
                                 @confirm="categoryDelete(scope.$index, scope.row)">
                    <el-button size="mini" type="danger" slot="reference">删除</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
    <el-footer>Footer</el-footer>
  </el-container>
</div>
</body>
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        orderArr: [],
        cartArr: [],
        tabPosition: 'left',
        name: ''
      }
    },
    created: function () {
      this.name = location.search.split("=")[1];
      this.loadOrder();
      this.loadCart();
    },
    methods: {
      handleSelect(index) {
        console.log(index);
        //传递过来的index 其实就是分类的id
        //跳转到新的页面显示这个分类下的商品信息
        if (index == "login") {//判断出点击的不是搜索框
          location.href = "/login.html";
        }else if (index == "reg"){
          location.href = "/reg.html";
        }else if (index == "myorder"){
          location.href = "/usercommodityorder.html?name="+1;
        }else if (index == "shoppingcart"){
          location.href = "/usercommodityorder.html?name="+2;
        }else if (index != -1){
          location.href == "/result.html?cid=" + index;
        }
      },
      asideSelect(index){

      },
      categoryDelete(index, category){

      },
      loadOrder(){
        axios.get("/myorder/select").then(function (response) {
          v.orderArr = response.data;
        })
      },
      loadCart(){
        axios.get("/shoppingcart/select").then(function (response) {
          v.cartArr = response.data;
        })
      }
    }
  })
</script>
</html>